<template>
  <div class="content">
    <div class="title">
      <div class="text">
        <div class="font">人员</div>
      </div>
    </div>
    <div class="echart">
      <div id="Crew" style="width:100%;height:200px;" />
    </div>
  </div>
</template>

<script>
import { currentData } from '@/api/autonym'

export default {
  name: 'Crew',
  data() {
    return {
      data: {

      }
    }
  },
  mounted() {
    // this.getDetail()
    this.$nextTick(function() {
      this.drawPie()
    })
  },
  methods: {
    // 获取数据
    async getDetail() {
      const res = await currentData()
      if (res.code === 200) {
        if (res.data) {
          this.data = res.data
        }
      }
    },
    drawPie() {
      const myChart = this.$echarts.init(document.getElementById('Crew'))
      var dataStyle = {
        normal: {
          label: { show: false },
          labelLine: { show: false }
          // shadowBlur: 40,
          // shadowColor: 'rgba(40, 40, 40, 0.5)'
        }
      }
      var placeHolderStyle = {
        normal: {
          color: 'rgba(0,0,0,0)',
          label: { show: false },
          labelLine: { show: false }
        },
        emphasis: {
          color: 'rgba(0,0,0,0)'
        }
      }
      const option = {
        color: ['#3BA0FF', '#36CBCB', '#EECB5F'],
        tooltip: {
          show: true,
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          itemGap: 12,
          top: '35%',
          left: '60%',
          icon: 'circle',
          data: ['已进场', '未进场', '已离场'],
          textStyle: {
            color: '#ffffff',
            fontSize: 12,
            // align: 'left',
            padding: 2
          }
        },
        series: [
          {
            name: '已进场',
            type: 'pie',
            left: '-40%',
            // top: '-40%',
            radius: [60, 80],
            itemStyle: dataStyle,
            clockWise: true, // 饼图的扇区是否是顺时针排布。[ default: true ]
            hoverAnimation: false,
            data: [
              {
                value: 300,
                name: '已进场'
              },
              {
                value: 50,
                name: 'invisible',
                itemStyle: placeHolderStyle
              }
            ]
          },
          {
            name: '未进场',
            type: 'pie',
            left: '-40%',
            radius: [40, 60],
            itemStyle: dataStyle,
            clockWise: true, // 饼图的扇区是否是顺时针排布。[ default: true ]
            hoverAnimation: false,
            data: [
              {
                value: 150,
                name: '未进场'
              },
              {
                value: 60,
                name: 'invisible',
                itemStyle: placeHolderStyle
              }
            ]
          },
          {
            name: '已离场',
            type: 'pie',
            left: '-40%',
            hoverAnimation: false,
            radius: [20, 40],
            itemStyle: dataStyle,
            clockWise: true, // 饼图的扇区是否是顺时针排布。[ default: true ]
            data: [
              {
                value: 80,
                name: '已离场'
              },
              {
                value: 50,
                name: 'invisible',
                itemStyle: placeHolderStyle
              }
            ]
          }
        ]
      }
      myChart.setOption(option, window.onresize = myChart.resize)
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  // color: #ffffff;
  // border: 1px solid rgba(221,221,221,0.2);
  margin: 0;
  padding: 10px;
  .title{
    display: flex;
    .text{
      flex: 1;
      text-align: left;
      .font{
        color:#ffffff;
        cursor: pointer;
        font-size: 12px;
        font-weight: 400;
        padding: 5px 0;
        .number{
          font-size:14px;
          font-weight:500;
          color:rgba(255,255,255,0.85);
        }
      }
      .money{
         font-size: 12px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .echart{
    // height: 70px;
    margin: 35px 0 0 0;
  }
  .name{
    margin-top: -60px;
    text-align: center;
    color:rgba(255,255,255,1);
    .text{
      text-align: center;
      margin-bottom: 6px;
      .bground{
        width:8px;
        height:8px;
        background:rgba(210,154,0,1);
        border-radius: 4px;
        float: left;
        margin-left: 27%;
        margin-top: 5px;
      }
    }
  }
}
</style>
